<template>
  <div>
    <zm-dialog
      :title="TITLE"
      :visible.sync="value"
      append-to-body
      :before-close="dialogClose"
      :close-on-click-modal="false"
    >
    <!-- 提示信息 -->
      <zm-desc v-if="isRange" title="规则说明" description="规则只能由小到大进行设置，且必须为连续的区间，边界规则有且仅有一档。如：20 < x < 30 ; 30≤ x < 40" type="warning" class="mb20"></zm-desc>
      <zm-form
        class="ml20"
        :model="form"
        ref="form"
        :rules="rules"
        label-width="80px"
        label-position="left"
      >
        <zm-form-item label="销售折扣" prop="sectionType" v-if="isRange">
          <el-radio-group v-model="form.sectionType" :disabled="disabledEdit" @change="handleReset">
            <el-radio label="1">限定区间值</el-radio>
            <el-radio label="2">限定边界值</el-radio>
          </el-radio-group>
          <!-- 限定区间值 start-->
          <div v-if="+form.sectionType === 1" class="mt10">
            <zm-form-item prop="minValue" class="dib">
              <zm-input v-model="form.minValue" type="number" class="w120" :disabled="disabledEdit">
                <template slot="append">%</template>
              </zm-input>
            </zm-form-item>
            <zm-form-item prop="minOperationSymbol" class="dib">
              <el-select
                class="w80"
                v-model="form.minOperationSymbol"
                placeholder="请选择"
                :disabled="disabledEdit"
              >
                <el-option label="小于" value="1"></el-option>
                <el-option label="小于等于" value="2"></el-option>
              </el-select>
            </zm-form-item>
            <span>销售折扣</span>
            <zm-form-item prop="maxOperationSymbol" class="dib">
              <el-select
                class="w80"
                v-model="form.maxOperationSymbol"
                placeholder="请选择"
                :disabled="disabledEdit"
              >
                <el-option label="小于" value="3"></el-option>
                <el-option label="小于等于" value="4"></el-option>
              </el-select>
            </zm-form-item>
            <zm-form-item prop="maxValue" class="dib">
              <zm-input v-model="form.maxValue" type="number" class="w120" :disabled="disabledEdit">
                <template slot="append">%</template>
              </zm-input>
            </zm-form-item>
          </div>
          <!-- 限定区间值 end-->
          <!-- 限定边界值 start-->
          <div v-if="+form.sectionType === 2" class="mt10">
            <zm-form-item prop="minOperationSymbol" class="dib">
              <span>折扣</span>
              <el-select
                class="w80"
                v-model="form.minOperationSymbol"
                placeholder="请选择"
                :disabled="disabledEdit"
              >
                <el-option label="大于" value="1"></el-option>
                <el-option label="大于等于" value="2"></el-option>
              </el-select>
            </zm-form-item>
            <zm-form-item prop="minValue" class="dib">
              <zm-input v-model="form.minValue" class="w120" :disabled="disabledEdit">
                <template slot="append">%</template>
              </zm-input>
            </zm-form-item>
          </div>
          <!-- 限定边界值 end-->
        </zm-form-item>
        <zm-form-item label="销售折扣" prop="minValue" v-if="!isRange">
          <zm-input v-model="form.minValue" class="w120">
            <template slot="append">%</template>
          </zm-input>
        </zm-form-item>
        <zm-form-item
          :label="isRange ? '提成比例' : '固定提成'"
          prop="proportion"
        >
          <zm-input v-model="form.proportion" class="w120">
            <template slot="append">%</template>
          </zm-input>
        </zm-form-item>
      </zm-form>
      <div slot="footer" class="tr">
        <zm-button @click="dialogClose" type="info">取消</zm-button>
        <zm-button @click="onSave" v-if="isRange" type="primary">确定</zm-button>
        <zm-button @click="onSaveOfMovie" v-if="!isRange" type="primary">确定</zm-button>
      </div>
    </zm-dialog>
  </div>
</template>
<script>
import VALID_RULES from '@/utils/validateRule'
import dialogMixin from '@/mixins/dialogMixin'
import zmDesc from '@/components/ZmDesc'
import { rules } from './const'
export default {
  name: 'SetConfig',
  components: {zmDesc},
  mixins: [dialogMixin],
  inject: ['$product'],
  props: {
    rowObj: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      VALID_RULES,
      form: {
        sectionType: '1', // 区间类型：1区间，2便捷
        minOperationSymbol: '', // 运算符号：1大于，2大于等于，3小于，4小于等于，5等于
        maxOperationSymbol: '', // 运算符号：1大于，2大于等于，3小于，4小于等于，5等于
        minValue: '', // 区间最小值
        maxValue: '', // 区间最大值
        proportion: '' // 提成比例
      },
      disabledEdit: false,
      endData: null
    }
  },
  computed: {
    // // 是否为心选
    //
    isXXcard () {
      return this.$product.form.businessType.includes('3') || this.infoData.useScope.includes('2')
    },
    // 是否为区间范围设置
    isRange () {
      return this.$product.form.practiceCostPriceType === '1'
    },
    TITLE () {
      return this.rowObj.type === 'edit' ? '编辑配置提成' : '新增配置提成'
    },
    rules () {
      const _obj = rules(this)
      _obj.maxValue = {validator: VALID_RULES.stringNumber}
      _obj.minValue = {validator: VALID_RULES.stringNumber}
      _obj.proportion = {validator: VALID_RULES.stringNumber}
      return _obj
    }
  },
  watch: {},
  created () {
    this.init()
  },
  methods: {
    init () {
      if (this.rowObj.type === 'edit') {
        Object.assign(this.form, this.rowObj.row)
        this.disabledEdit = true
      } else {
        this.disabledEdit = false
      }
      this.getLimitValue()
    },
    getLimitValue () {
      // 运算符号：1大于，2大于等于，3小于，4小于等于，5等于
      if (this.rowObj.data && this.rowObj.data.length > 0) {
        // 取区间最后一条数据的最大值
        const len = this.rowObj.data.length
        this.endData = this.rowObj.data[len - 1]
      } else {
        this.endData = null
      }
    },
    onSave () {
      if (this.rowObj.type === 'create') {
        let _valid = false
        // 边界值类型的数据有且仅有一条
        const bianjie = this.rowObj.data.find((item) => item.sectionType === '2')
        if (bianjie && this.form.sectionType === '2') {
          this.$message.warning('边界值提成规则已存在，请配置连续的区间范围')
          return
        }

        if (this.form.minValue && this.form.maxValue && (+Number(this.form.minValue).toFixed(2) >= +Number(this.form.maxValue).toFixed(2))) {
          this.$message.warning('最大值应大于最小值')
          return
        }
        if (this.endData) {
        // 区间值判断
          if (this.endData.sectionType === '1') {
            if (+Number(this.form.minValue).toFixed(2) !== +Number(this.endData.maxValue).toFixed(2)) {
              this.$message.warning(`数据设置错误，请设置连续的区间范围，最小值应为${this.endData.maxValue}`)
              return
            } else {
              // 如果上一条数据取等，则不能再取等;区间：4 小于等于；边界：2 大于等于
              // const limitSymbol = this.form.sectionType === '1' ? '4' : '2'
              const limitSymbol = '2'
              if (this.endData.maxOperationSymbol === '4' && this.form.minOperationSymbol === limitSymbol) {
                this.$message.warning('最小值不能再次取等，请设置连续的区间范围')
                return
              } else if (this.endData.maxOperationSymbol === '3' && this.form.minOperationSymbol !== limitSymbol) {
                // 上一条数据不取等，当前数据必须取等
                this.$message.warning('最小值需取等，请设置连续的区间范围')
                return
              } else {
                _valid = true
              }
            }
          } else {
          // 上一条数据为边界值类型
            this.$message.warning('边界值规则已存在，无法继续添加其他档位')
            return
          }
        } else {
          _valid = true
        }

        this.$refs.form.validate((valid) => {
          if (valid && _valid) {
            this.$emit('handle-after', 'create', this.form)
            this.dialogClose()
          } else {
            console.log('err')
          }
        })
      } else {
        // 编辑
        this.$refs.form.validateField('proportion', valid => {
          if (!valid) {
            this.$emit('handle-after', 'edit', this.form, this.rowObj.index)
            this.dialogClose()
          } else {
            this.$message.warning('请完善信息')
          }
        })
      }
      console.log(this.$refs.form.validate(), 'this.$refs.form.validate')
    },
    onSaveOfMovie () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.rowObj.type === 'create') {
            this.$emit('handle-after', 'create', this.form)
          } else {
            this.$emit('handle-after', 'edit', this.form, this.rowObj.index)
          }
          // }
          // this.dialogClose()
        } else {
          console.log('err')
        }
      })
    },
    handleReset (val) {
      this.$refs.form.resetFields()
      this.$set(this.form, 'sectionType', val)
    }
  }
}
</script>
<style scoped lang='scss'>
</style>
